<template>
    <div class="chart2">
        <div class="box" id="subChart"></div>
        <!-- <JLock></JLock> -->
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed, onUnmounted } from "vue";
import { useAccount } from "@/stores/account";
import { URL_KLINE_DATA, URL_SIGNAL_LIST } from "@/comm/api";
import { toChartData } from "@/comm/format";
// import { get } from "http";
import { useKline } from "@/stores/kline";
import { customStyle } from "@/components/chart/customStyle";
import JLock from "@/components/j-lock/index.vue";
import { get } from "@/comm/request";
import { useRoute } from "vue-router";
import { useChart } from "@/hooks/useChart";

const route = useRoute();
const { initChart, resizeChart, changeChartStyle, addSignalBS } = useChart();

onMounted(async () => {
    window.addEventListener("resize", onResize);
    
    await initChart("subChart", route.params.id + "", "D1", false);
    changeChartStyle(false);

    let res: any = await get(URL_SIGNAL_LIST, { interval: "D1", symbol: route.params.id });
    console.log("######### URL_SIGNAL_LIST", res.data);
    res.data.forEach((i: any) => {
        addPot(i);
    });
});

onUnmounted(() => {
    window.removeEventListener("resize", onResize);
});

const onResize = () => {
    resizeChart();
};

function addPot(pot: any) {
    addSignalBS(
        pot,
        (e: any) => {
            console.log(e, "enter pot");
            const obj = e.overlay.extendData;
            // toolTips.value = [obj.name, obj.date];
        },
        (e: any) => {
            // toolTips.value = []
        }
    );
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
